<template>
<div id="app">
  <v-header :seller="seller"></v-header>
  <div class="tap border-1px" style="opacity: 1;">
    <div class="tap-item">
      <router-link to="/goods">商品</router-link>
    </div>
    <div class="tap-item">
      <router-link to="/ratings">评价</router-link>
    </div>
    <div class="tap-item">
      <router-link to="/seller">商家</router-link>
    </div>
  </div>
  <transition :name="direction" mode="out-in">
    <!-- keep-alive可以将组件缓存下来 -->
    <keep-alive>
      <router-view v-if="isRouterAlive" class="view" :seller="seller"></router-view>
    </keep-alive>
  </transition>
</div>
</template>

<script>
import header from 'components/header/header.vue'
export default {
  data() {
    return {
      seller: {},
      direction: 'slide-right',
      isRouterAlive: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      if (to.path === '/') {
        this.direction = 'slide-right'
      } else if (from.path === '/') {
        this.direction = 'slide-left'
      } else {
        this.direction = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      }
    }
  },
  created() {
    this.$http.get('/api/seller').then((res) => {
      let body = res.body
      !body.errno && (this.seller = body.data)
    })
  },
  components: {
    'v-header': header
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import 'common/stylus/mixin.styl'
  #app
    .tap
      display: flex
      width: 100%
      height: 40px
      border-1px(rgba(7, 17, 27, 0.1))
      .tap-item
        flex: 1
        line-height: 40px
        text-align: center
        font-size: 14px
        & > a
          color: rgb(77, 85, 93)
          text-decoration: none
          &.active
            color: rgb(240, 20, 20)
    .view
      position: absolute
      width: 100%
      transition: transform 0.3s ease-out
      &.slide-left-enter
        transform: translate(100%, 0)
      &.slide-left-leave-active
        transform: translate(0, 0)
      &.slide-right-enter
        transform: translate(0, 0)
      &.slide-right-leave-active
        transform: translate(100%, 0)
</style>
